<template>
  <div class="edit-major">
    <el-button type="warning" style="margin-bottom: 10px" @click="isShowDialog">
      添加专业
    </el-button>

    <el-table
      :data="majorTable"
      style="width: 100%"
      stripe
      border
      highlight-current-row
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column label="专业排序" min-width="33%">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专业名称" min-width="33%">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.majorName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="33%">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deleteMajorData(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="专业详情"
      :visible.sync="dialogFormVisible"
      append-to-body
    >
      <el-form :model="majorForm" ref="formRef" :rules="majorRules">
        <el-form-item
          prop="sort"
          label="专业序号"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="majorForm.sort"
            autocomplete="off"
            placeholder="数字越大，排序越靠后"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="专业名称"
          :label-width="formLabelWidth"
          prop="majorName"
        >
          <el-input v-model="majorForm.majorName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMajorData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMajor, addMajor, deleteMajor } from "@/api/adminEditMajor";
import { isConfirm } from "@/utils/confirm";
export default {
  // 组件名称
  name: "editMajor",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      majorTable: [], //表格信息
      dialogFormVisible: false, //对话框的显示
      //表单信息
      majorForm: {
        majorName: "",
        sort: "",
      },
      //表单验证
      majorRules: {
        majorName: [
          { required: true, message: "请输入专业名称", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入专业序号", trigger: "blur" }],
      },
      formLabelWidth: "120px", //表单宽度
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created() {
    this.onGetMajorList();
  },
  mounted() {},
  // 组件方法
  methods: {
    //获取所有专业信息
    async onGetMajorList() {
      const { data } = await getMajor();
      this.majorTable = data.data.items;
    },

    //点击按钮弹出对话框
    isShowDialog() {
      this.dialogFormVisible = true;
    },

    //点击确定添加班级
    addMajorData() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          console.log(this.majorForm);
          await addMajor(this.majorForm);
          this.dialogFormVisible = false;
          this.onGetMajorList(); //重新渲染
          this.resetForm(); //清空表单
        }
      });
    },

    //关闭对话框重置表单
    resetForm() {
      this.majorForm.majorName = "";
      this.majorForm.sort = "";
    },

    //点击删除按钮
    async deleteMajorData(data) {
      if (await isConfirm("操作将删除该课程, 是否继续?")) {
        await deleteMajor(data.id);
        this.onGetMajorList();
      }
    },
  },
};
</script> 

<style scoped lang='less'>
</style>
